<router-outlet></router-outlet>

<div class="right-column" id="dataScreen">
  <h1 class="title">DISTROS</h1>

  <mat-tab-group>
    <mat-tab label="Edit" id="editDistro">
      <h1 class="title">Editing a Distro</h1>
      <h2>Name:  {{datatable[14][5]}}</h2>
      <div>
        <button mat-raised-button color="primary">Save</button>
        <button mat-raised-button color="primary">Cancel</button>
      </div>
      <form class="distro-form">
        <div class="form-group">
          <mat-form-field>
            <mat-label>Owners</mat-label>
            <input matInput class="form-control"
                   id="distro_owners" value="{{datatable[14][1]}} <str>"
                   autocomplete="off"/>
          </mat-form-field>
        </div>
        <div class="form-group">
          <mat-form-field>
            <mat-label>Kernel</mat-label>
            <input matInput class="form-control"
                   id="distro_kernel" value="{{datatable[8][1]}}  <path to kernel str>"
                   autocomplete="off"/>
          </mat-form-field>
        </div>
        <div class="form-group">
          <mat-form-field>
            <mat-label>Initrd</mat-label>
            <input matInput class="form-control"
                   id="distro_Initrd" value="{{datatable[7][1]}} <path to initrd str>"
                   autocomplete="off"/>
          </mat-form-field>
        </div>
        <div class="form-group">
          <mat-form-field>
            <mat-label>Kernel Options</mat-label>
            <input matInput class="form-control"
                   id="distro_kernel_options" value="{{datatable[11][1]}} <options dict>"
                   autocomplete="off"/>
          </mat-form-field>
        </div>
        <div class="form-group">
          <mat-form-field>
            <mat-label>Kernel Options post-install</mat-label>
            <input matInput class="form-control"
                   id="distro_kernel_post_install" value="{{datatable[12][1]}} <post options dict>"
                   autocomplete="off"/>
          </mat-form-field>
        </div>
        <div class="form-group">
          <mat-form-field>
            <mat-label>Auto-install template metadata</mat-label>
            <input matInput class="form-control"
                   id="distro_autoinstall" value="{{datatable[18][1]}} <template dict>"
                   autocomplete="off"/>
          </mat-form-field>
        </div>
        <div class="form-group">
          <mat-form-field>
            <mat-label>Architecture</mat-label>
            <input matInput class="form-control"
                   id="distro_architecture" value="{{datatable[0][1]}} <arch str>"
                   autocomplete="off"/>
          </mat-form-field>
        </div>
        <div class="form-group">
          <mat-form-field>
            <mat-label>Breed</mat-label>
            <input matInput class="form-control"
                   id="distro_breed" value="{{datatable[4][1]}} <breed str>"
                   autocomplete="off"/>
          </mat-form-field>
        </div>
        <div class="form-group">
          <mat-form-field>
            <mat-label>OS Version</mat-label>
            <input matInput class="form-control"
                   id="distro_os_version" value="{{datatable[15][1]}} <os version str>"
                   autocomplete="off"/>
          </mat-form-field>
        </div>
        <div class="form-group">
          <mat-form-field>
            <mat-label>Boot Loader</mat-label>
            <input matInput class="form-control"
                   id="distro_boot_loader" value="{{datatable[3][1]}} <str>"
                   autocomplete="off"/>
          </mat-form-field>
        </div>
        <div class="form-group">
          <mat-form-field>
            <mat-label>Comment</mat-label>
            <input matInput class="form-control"
                   id="distro_comment" value="{{datatable[5][1]}} <str>"
                   autocomplete="off"/>
          </mat-form-field>
        </div>
      </form>
      <h5 class="alert alert-danger">CAUTION: Tab navigation will EXIT edit mode</h5>
    </mat-tab>
    <mat-tab label="View/Update Distros">
      <ng-container class="tab-pane fade show active"
                    id="description"
                    role="tabpanel"
                    aria-labelledby="description-tab">
        <table mat-table [dataSource]="datatable" class="mat-elevation-z8">
          <!-- Position Column -->
          <ng-container matColumnDef="position">
            <th mat-header-cell *matHeaderCellDef> No. </th>
            <td mat-cell *matCellDef="let element; let i = index">{{i + 1}}</td>
          </ng-container>

          <!-- Item Column -->
          <ng-container matColumnDef="item">
            <th mat-header-cell *matHeaderCellDef>Item</th>
            <td mat-cell *matCellDef="let element; let i = index">{{datatable[i][0]}}</td>
          </ng-container>

          <!-- Description Column -->
          <ng-container matColumnDef="description">
            <th mat-header-cell *matHeaderCellDef>Description</th>
            <td mat-cell *matCellDef="let element; let i = index">{{datatable[i][5]}}</td>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="displayedColumns2"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns2"></tr>
        </table>
      </ng-container>
    </mat-tab>
    <mat-tab label="List">
      <table mat-table [dataSource]="datatable" class="mat-elevation-z8">
        <!-- Position Column -->
        <ng-container matColumnDef="position">
          <th mat-header-cell *matHeaderCellDef> No. </th>
          <td mat-cell *matCellDef="let element; let i = index">{{i + 1}}</td>
        </ng-container>
        <!-- Type Column -->
        <ng-container matColumnDef="type">
          <th mat-header-cell *matHeaderCellDef>Type</th>
          <td mat-cell *matCellDef="let element">{{datatable[0][1]}}</td>
        </ng-container>
        <!-- Version Column -->
        <ng-container matColumnDef="version">
          <th mat-header-cell *matHeaderCellDef>Version</th>
          <td mat-cell *matCellDef="let element">{{datatable[15][1]}}</td>
        </ng-container>
        <ng-container matColumnDef="update">
          <th mat-header-cell *matHeaderCellDef> Update </th>
          <td mat-cell *matCellDef="let element">
            <button id="arch_os_edit" mat-raised-button color="accent">Edit</button>
            <button id="arch_os_copy" mat-raised-button color="accent">Copy</button>
            <button id="arch_os_rename" mat-raised-button color="accent">Rename</button>
            <button id="arch_os_delete" mat-raised-button color="accent">Delete</button>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
    </mat-tab>
  </mat-tab-group>

</div>
